﻿@{
    ViewBag.Title = "Grid Pager";
    Layout = "~/Views/Share/_Layout.cshtml";
}

@section scripts{
    <script src="~/Content/grid/src/noke.grid.js"></script>
    <script>
        $(function () {
            BindProcessData();
        });

        function ProcessGridSetting() {
            var setting = { id: "ProcessGrid", key: "ID", title: {}, cols: [], toolbar: {}, rowindex: true, data: [], pageindex: 3, pagesize: 6 };
            setting.cols.push({ key: "ID", type: "string", width: 50, label: "ID" });
            setting.cols.push({ key: "ProcessName", type: "string", width: 80, label: "ProcessName" });
            setting.cols.push({ key: "Summary", type: "string", width: 80, label: "Summary" });
            setting.cols.push({ key: "Time", type: "string", width: 80, label: "Time" });
            setting.cols.push({ key: "Operator", type: "string", width: 60, label: "Operator" });

            setting.pager = GetProcessData;
            return setting;
        }

        function BindProcessData() {
            var setting = ProcessGridSetting();
            GetProcessData(setting, function (args) {
                $('#ProcessGrid').grid(args);
            });
        }

        function GetProcessData(setting, callback) {
            var processList = [];
            processList.push({ ID: 1, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 2, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 3, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 4, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 5, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 6, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 7, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 8, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 9, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 10, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 11, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 12, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 13, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 14, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 15, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 16, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 17, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 18, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 19, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 20, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 21, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 22, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 23, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 24, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 25, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 26, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 27, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 28, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 29, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 30, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 31, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 32, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 33, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 34, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 35, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 36, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 37, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 38, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 39, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 40, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 41, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 42, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 43, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 44, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 45, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 46, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 47, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 48, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
            processList.push({ ID: 49, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });

            debugger;
            setting.data = [];
            setting.total = processList.length;

            $(processList).each(function (i, item) {
                var b = (setting.pageindex - 1) * setting.pagesize;
                var e = setting.pageindex * setting.pagesize;
                if (i >= b && i < e) {
                    setting.data.push(item);
                }
            });
            callback(setting);
        }

    </script>

}

@section head{
        
        <div class="col-sm-4">
            <ol class="breadcrumb">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/">UI&控件</a>
                </li>
                <li class="active">
                    <strong>Grid Pager</strong>
                </li>
            </ol>
        </div>

}

<div class="row">    
    <div class="col-lg-12">
        <div id="ProcessGrid"></div>
        
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

<div class="row"> 
    <div class="col-lg-3">
        <div class="highlight">
            <pre style="background-color:#333;">
                <code class="language-html" data-lang="html">
<kbd>//********* html **********//

&lt;script src="~/Content/grid/src/noke.grid.js"&gt;
    &lt;/script&gt;
                          
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"ProcessGrid"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span></kbd> 
                </code>
                <!-- /.code -->
            </pre>
        </div>
    </div>
    <!-- /.col-lg-3 -->
    <div class="col-lg-9">
        <div class="highlight">
            <pre style="background-color:#333;">
                <code class="language-js" data-lang="js">
<kbd>//********* javascript **********//</kbd>

<kbd>function $start() {
    BindProcessData();
}

function ProcessGridSetting() {
    var setting = { id: "ProcessGrid", key: "ID", title: {}, cols: [], toolbar: {}, rowindex: false, data: [], pageindex: 3, pagesize: 6 };
    setting.cols.push({ key: "ID", type: "string", width: 50, label: "ID" });
    setting.cols.push({ key: "ProcessName", type: "string", width: 80, label: "ProcessName" });
    setting.cols.push({ key: "Summary", type: "string", width: 80, label: "Summary" });
    setting.cols.push({ key: "Time", type: "string", width: 80, label: "Time" });
    setting.cols.push({ key: "Operator", type: "string", width: 60, label: "Operator" });

    setting.pager = GetProcessData;
    return setting;
}

function BindProcessData() {
    var setting = ProcessGridSetting();
    GetProcessData(setting, function (args) {
        $('#ProcessGrid').grid(args);
    });
}

function GetProcessData(setting, callback) {
    var processList = [];
    processList.push({ ID: 1, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 2, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 3, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 4, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 5, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 6, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 7, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 8, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 9, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 10, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 11, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 12, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 13, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 14, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 15, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 16, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 17, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 18, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 19, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 20, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 21, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 22, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 23, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 24, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 25, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 26, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 27, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 28, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 29, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 30, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 31, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 32, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 33, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 34, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 35, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 36, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 37, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 38, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 39, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 40, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 41, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 42, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 43, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 44, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 45, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 46, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 47, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 48, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });
    processList.push({ ID: 49, ProcessName: '请假申请', Summary: '员工请假需提前发起此申请流程.', Time: '2016-04-13', Operator: 'iRacer' });

    debugger;
    setting.data = [];
    setting.total = processList.length;

    $(processList).each(function (i, item) {
        var b = (setting.pageindex - 1) * setting.pagesize;
        var e = setting.pageindex * setting.pagesize;
        if (i >= b && i < e) {
            setting.data.push(item);
        }
    });
    callback(setting);
}</kbd>        
                </code>
                <!-- /.code -->
            </pre>
        </div>
    </div>
    <!-- /.col-lg-9 -->

</div>
<!-- /.row -->
